<template>
  <div class="dashboard">
    <h2 class="dashboard-title">数据概览</h2>

    <div class="stats-grid">
      <!-- 统计卡片数据绑定 -->
      <div class="stat-card bg-gradient-blue">
        <div class="stat-header">
          <i class="icon-book"></i>
          <h3>总试题数</h3>
        </div>
        <p class="stat-number">{{ staticData.questionCount.toLocaleString()  }}</p>
        <div class="stat-trend">↑ 12% 本月新增</div>
      </div>

      <div class="stat-card bg-gradient-green">
        <div class="stat-header">
          <i class="icon-exam"></i>
          <h3>总考试数</h3>
        </div>
        <p class="stat-number">{{ staticData.examCount  }}</p>
        <div class="stat-trend">→ 与上月持平</div>
      </div>

      <div class="stat-card bg-gradient-purple">
        <div class="stat-header">
          <i class="icon-user"></i>
          <h3>总用户数</h3>
        </div>
        <p class="stat-number">{{ staticData.userCount.toLocaleString()  }}</p>
        <div class="stat-trend">↑ 5% 本周新增</div>
      </div>

      <div class="stat-card bg-gradient-orange">
        <div class="stat-header">
          <i class="icon-score"></i>
          <h3>平均成绩</h3>
        </div>
        <p class="stat-number">{{ averageScore.toFixed(2)  }}</p>
        <div class="stat-trend">↑ 2.5分 同比提升</div>
      </div>
    </div>

    <div class="charts">
      <!-- 图表数据绑定 -->
      <div class="chart-container">
        <div class="chart-header">
          <h3>最近考试成绩分布</h3>
          <div class="chart-legend">
            <span class="legend-item"><i class="legend-bar"></i>学生数量</span>
          </div>
        </div>
        <div class="chart-wrapper">
          <canvas ref="scoreDistributionChart"></canvas>
        </div>
      </div>

      <div class="chart-container">
        <div class="chart-header">
          <h3>试题类型分布</h3>
          <div class="chart-legend">
            <span v-for="(type, index) in staticData.questionTypes"
                  :key="type"
                  class="legend-item">
              <i :class="`legend-dot color-${index + 1}`"></i>{{ type }}
            </span>
          </div>
        </div>
        <div class="chart-wrapper">
          <canvas ref="questionTypeChart"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Chart from 'chart.js/auto'

// 静态数据配置
const staticData = {
  questionCount: 12560,
  examCount: 356,
  userCount: 2489,
  scores: [85, 90, 78, 92, 88, 76, 95, 81, 89, 72],
  scoreDistribution: [5, 10, 15, 20, 10],
  questionTypes: ['单选题', '多选题', '判断题', '填空题', '简答题'],
  questionTypeData: [30, 20, 15, 25, 10]
}

const scoreDistributionChart = ref(null)
const questionTypeChart = ref(null)

const averageScore = computed(() => {
  return staticData.scores.length
    ? staticData.scores.reduce((a,  b) => a + b, 0) / staticData.scores.length
    : 0
})
onMounted(() => {
  // 成绩分布图表初始化
  new Chart(scoreDistributionChart.value,  {
    type: 'bar',
    data: {
      labels: ['0-20', '21-40', '41-60', '61-80', '81-100'],
      datasets: [{
        label: '学生数量',
        data: staticData.scoreDistribution,
        backgroundColor: 'rgba(75, 192, 192, 0.6)'
      }]
    },
    options: {
      responsive: true,
      scales: { y: { beginAtZero: true } }
    }
  })

  // 试题类型图表初始化
  new Chart(questionTypeChart.value,  {
    type: 'pie',
    data: {
      labels: staticData.questionTypes,
      datasets: [{
        data: staticData.questionTypeData,
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)'
        ]
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'bottom' }
      }
    }
  })
})
</script>

<style scoped>
.dashboard {
  padding: 2rem;
  min-height: 100vh;
}

.dashboard-title {
  color: #1a1a1a;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e4e7ed;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  padding: 1.5rem;
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-3px);
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #6B8DD6 0%, #8E37D7 100%);
}

.bg-gradient-green {
  background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
}

.bg-gradient-purple {
  background: linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%);
}

.bg-gradient-orange {
  background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.stat-header i {
  font-size: 1.5rem;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 1rem 0;
}

.stat-trend {
  font-size: 0.9rem;
  opacity: 0.9;
}

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-bar {
  display: inline-block;
  width: 20px;
  height: 4px;
  background: #4CAF50;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.color-1 {
  background: #FF6384;
}

.color-2 {
  background: #36A2EB;
}

.color-3 {
  background: #FFCE56;
}

.color-4 {
  background: #4BC0C0;
}

.color-5 {
  background: #9966FF;
}

.chart-wrapper {
  position: relative;
  height: 300px;
}
</style>
